<script setup lang="ts">
import { POSTOrderAPI } from '@/apis/Order'
import { ref } from 'vue'

// 支付弹窗实例
const popupRef = ref()

// 定义组件属性
defineProps<{
  totalAmount: number
}>()

// 支付方式列表
const paymentMethods = [
  {
    id: 1,
    name: '微信支付',
  },
  {
    id: 2,
    name: '支付宝支付',
  },
]

// 选中的支付方式
const selectedPayment = ref(paymentMethods[0].id)

// 打开弹窗方法
const open = () => {
  popupRef.value?.open()
}

// 关闭弹窗方法
const close = () => {
  popupRef.value?.close()
}

// 选择支付方式
const selectPayment = (id: number) => {
  console.log(id)

  selectedPayment.value = id
}

// 暴露方法给父组件
defineExpose({
  open,
  close,
})

const emit = defineEmits<{
  confirm: [index: number]
  close: []
}>()
</script>

<template>
  <uni-popup ref="popupRef" type="bottom">
    <view class="payment-popup">
      <!-- 头部 -->
      <view class="header">
        <text class="title">请选择支付方式</text>
        <text class="close" @tap="close">×</text>
      </view>

      <!-- 支付金额 -->
      <view class="amount">
        <text class="label">支付金额</text>
        <text class="value">¥{{ totalAmount.toFixed(2) }}</text>
      </view>

      <!-- 支付方式列表 -->
      <view class="payment-list">
        <view
          v-for="method in paymentMethods"
          :key="method.id"
          class="payment-item"
          :class="{ active: selectedPayment === method.id }"
          @tap="selectPayment(method.id)"
        >
          <image class="icon" mode="aspectFit" />
          <text class="name">{{ method.name }}</text>
          <text class="check">{{ selectedPayment === method.id ? '✓' : '' }}</text>
        </view>
      </view>

      <!-- 确认支付按钮 -->
      <button class="confirm-btn" @click="emit('confirm', selectedPayment)">确认支付</button>
    </view>
  </uni-popup>
</template>

<style lang="scss">
.payment-popup {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 30rpx;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;

    .title {
      font-size: 32rpx;
      font-weight: bold;
    }

    .close {
      font-size: 40rpx;
      color: #999;
      padding: 10rpx;
    }
  }

  .amount {
    text-align: center;
    margin-bottom: 40rpx;

    .label {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 10rpx;
      display: block;
    }

    .value {
      font-size: 40rpx;
      font-weight: bold;
      color: #27ba9b;
    }
  }

  .payment-list {
    margin-bottom: 40rpx;

    .payment-item {
      display: flex;
      align-items: center;
      padding: 30rpx 20rpx;
      border-bottom: 1rpx solid #eee;

      &.active {
        background-color: #f8f8f8;
      }

      .icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 20rpx;
      }

      .name {
        flex: 1;
        font-size: 28rpx;
      }

      .check {
        color: #27ba9b;
        font-size: 32rpx;
      }
    }
  }

  .confirm-btn {
    background-color: #27ba9b;
    color: #fff;
    border-radius: 80rpx;
    font-size: 30rpx;
    padding: 20rpx 0;
    margin: 0;

    &:active {
      background-color: darken(#27ba9b, 5%);
    }
  }
}
</style>
